<template>
  <div id="t">
    <n-space align="center" justify="space-between">
      <n-space align="center">
        <RouterLink to="/">
          <n-button quaternary size="large" style="width: 55px;height: 55px;padding-left: 10px;padding-right: 10px">
            <img src="../assets/logo.png" alt="logo" width="55" height="55" style="padding-top: 7px">
          </n-button>
        </RouterLink>
        <RouterLink to="/shop">
          <n-button text color="white" size="medium" style="font-size: large;font-weight: bolder;width: 60px">商店
          </n-button>
        </RouterLink>
        <RouterLink to="/bookcase">
          <n-button text color="white" size="medium" style="font-size: large;width: 60px">书柜</n-button>
        </RouterLink>
      </n-space>
      <n-space align="center">
        <n-input size="medium" placeholder="搜索" round style="width: 230px; "/>
        <RouterLink to="/cart">
          <n-button quaternary size="large" style="width: 45px; height: 45px; padding-left: 0">
            <img src="../assets/购物车.png" alt="购物车" width="42" height="42">
          </n-button>
        </RouterLink>
        <RouterLink to="/warehouse">
        <n-button quaternary size="large" style="width: 45px; height: 45px; padding-left: 0">
          <img src="../assets/卖书柜.png" alt="卖书柜" width="38" height="38">
        </n-button>
        </RouterLink>
        <n-button size="medium" style="color: #f2f2f2; background-color: #282828; margin-right: 20px">登陆/注册
        </n-button>
      </n-space>
    </n-space>
  </div>

</template>

<script>
export default {
  name: "NaviBar"
}
</script>

<style scoped>
#t {
  box-sizing: border-box;
  width: 100%;
  background-color: black;
  /*border: darkgray solid 1px;*/
}
</style>